<template>
  <div id="app">
    <div class="router">
      <router-view />
    </div>
    <div class="cont">
      <h1>正常父传子</h1>
      <MyCom1 :num="num1" @input="val => num1 = val" />
      <hr>
      <h2>父传子 v-model </h2>
      <MyCom2 v-model="num2" />
      <hr>
      <h2>父子组件 双向绑定  @update:num事件 </h2>
      <MyCom3 :num="num3" @update:num="val => num3=val" />
      <hr>
      <h2>父子组件 双向绑定 .async修饰符 </h2>
      <MyCom4
        :abc.sync="num4"
        :d.sync="num5"
      />
      <hr>
      <h2>props子组件获取从父组件传递的值是异步获取的</h2>
      <MyCom5
        ref="son"
        :str="str"
      />
      <p class="p">父组件：{{ str }}</p>
      <button @click="changeStr">修改父组件中的str</button>

      <hr>
      <UploadImg />
      <hr>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="A"> 复选框 A </el-checkbox>
        <el-checkbox label="B"> 复选框 B </el-checkbox>
        <el-checkbox label="复选框 C" />
        <el-checkbox label="禁用" disabled />
        <el-checkbox label="选中且禁用" disabled />
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import MyCom1 from './MyCom1'
import MyCom2 from './MyCom2'
import MyCom3 from './MyCom3'
import MyCom4 from './MyCom4'
import MyCom5 from './MyCom5'
export default {
  name: 'App',
  components: { MyCom1, MyCom2, MyCom3, MyCom4, MyCom5 },
  data() {
    return {
      num1: 99,
      num2: 123,
      num3: 777,
      num4: 1000,
      num5: 789,
      str: '父组件中的原始字符串123',
      checkList: ['选中且禁用', 'A']
    }
  },
  created() {
    console.log(process.env.NODE_ENV)
  },
  methods: {
    changeStr() {
      this.str = '父组件中更改了后的字符串456'
      console.log('修改后的父组件中的str值', this.str) // 父组件中更改了后的字符串456
      // 获取页面上dom内容
      console.log(document.querySelector('.p').innerHTML) // 父组件中的原始字符串123
      // 获取子组件的引用，输出其中的str
      console.log('直接输出子组件中的props值', this.$refs.son.str) // 父组件中的原始字符串123

      this.$nextTick(() => {
        // 获取页面上dom内容
        console.log(document.querySelector('.p').innerHTML) // 父组件中的原始字符串123
        // 获取子组件的引用，输出其中的str
        console.log('直接输出子组件中的props值', this.$refs.son.str) // 父组件中的原始字符串123
      })
    }
  }
}
</script>
<style scoped>
 .cont {
   margin-top: 50px;
   margin-left: 100px;
   padding: 20px;
   padding-bottom: 200px;
   border: 1px solid orange;
 }
</style>
